<template>
  <div class="baseTable">
    <el-table
      :data="table.tableData"
      stripe
      height="500px"
      v-el-height-adaptive-table="{ bottomOffset: 80 }"
      :header-cell-style="{ padding: '10px 0', 'background-color': '#f8f8f9' }"
      style="width: 100%"
    >
      <el-table-column
        v-for="(item, index) in table.tableColumn"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :sortable="item.sort"
        :width="item.width"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span v-if="item.render">
            {{ item.render(scope.row, scope.$index) }}
          </span>
          <span v-else-if="item.formatter">
            <span v-html="item.formatter(scope.row, item)"></span>
          </span>
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="table.tableOption"
        fixed="right"
        align="center"
        header-align="center"
        :label="table.tableOption.label"
        :width="table.tableOption.width"
      >
        <template slot-scope="scope">
          <el-button
            v-for="btn in table.tableOption.buttons"
            :key="btn.name"
            :style="btn.style"
            @click="handleButton(scope.row, btn.methods)"
            type="text"
          >
            {{ btn.name }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 是否调用分页 -->
    <div class="Page">
      <el-pagination
        v-if="table.Pagination"
        background
        class="tablePage"
        layout="total, prev, pager, next,sizes, jumper"
        :page-size="table.Pagination.pageSize"
        :page-sizes="[10, 100, 200, 500]"
        :total="table.Pagination.total"
        :current-page="table.Pagination.currentPage"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>
<script>
export default {
  name: "baseTable",
  props: {
    table: {
      type: Object,
      default: function() {
        return { tableData: [], tableColumn: [] };
      }
    }
  },
  data() {
    return {};
  },
  methods: {
    handleButton(row, methods) {
      this.$emit("action", { row: row, methods: methods });
    },
    handleSizeChange(val) {
      this.$emit("handleSizeChange", val);
    },
    handleCurrentChange(val) {
      this.$emit("handleCurrentChange", val);
    }
  }
};
</script>
<style lang="scss" scoped>
.Page {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  z-index: 10;
}
</style>
